import {View,Text, ImageBackground,StyleSheet,TextInput,TouchableOpacity,ToastAndroid} from 'react-native';
import React,{useLayoutEffect,useState,useEffect} from 'react';
import './global';
import { Ionicons } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { FontAwesome5 } from '@expo/vector-icons';
  


function Register({navigation}){
    const [username,setUsername] = useState('');
    const [password,setpassword] = useState('');
	const [twopwd,setTwopwd] = useState('');
    const [data,setData] = useState({ username: '' , password: '' });
    const [result,setResult] = useState('');
    const url = 'http://175.27.190.73:9000/userRegister';

    const getUser=(e)=>{
        setUsername(e.value);
    }

    const getPsd=(e)=>{
        setpassword(e.value);
    }

	const getTPsd=(e)=>{
	    setTwopwd(e.value);
	}

    useEffect(() => {
        setData({ username: username , password: password , twopwd: twopwd });
    }, [username]);
    useEffect(() => {
        setData({ username: username , password: password , twopwd: twopwd });
    }, [password]);
	useEffect(() => {
	    setData({ username: username , password: password , twopwd: twopwd });
	}, [twopwd]);
    
    const getData=()=>{
        setData({ username: username , password: password , twopwd: twopwd });
        fetch(url, {
            method: 'POST', 
            body: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(res => res.json())
        .then(res=> {
	        ToastAndroid.show(res,ToastAndroid.SHORT);
            if(res == "注册成功"){
                navigation.navigate('Login');
                localStorage['user'] = JSON.stringify(res.userInf[0]);
                console.log(res)
            }
            else{  
                console.log(error) 
            }
        })
        .catch(error =>{
		    console.log('error')
        })
    }



    return(
        <View>
            <ImageBackground 
                source={require("../assets/bg16.png")}
                style={{height:p2d(1340),width:'100%',position:'absolute',opacity:1,position:'absolute'}}
            >
            </ImageBackground>
            <View style={styles.header}>
                <Ionicons name="arrow-back" size={p2d(50)} color="white" style={{top:p2d(35),left:p2d(15)}} onPress={() =>{navigation.navigate('Login')}}/> 
                <Text style={styles.login1}>注册</Text>  
            </View>

            <View style={styles.login}>
                <View style={styles.account}>
                    <View style={styles.currency}>
                        <Ionicons name="ios-person" size={p2d(70)} color="black" style={{position:'absolute',top:p2d(15)}} />
                    </View>
                    <TextInput 
                    placeholder="请输入手机号"
                    style={styles.textinput}
                    onChangeText={setUsername}></TextInput>
                </View>
                
                <View style={styles.password}>
                    <View style={styles.currency}>
                        <FontAwesome5 name="unlock" size={p2d(70)} color="black"  style={{position:'absolute',top:p2d(15)}}/>
                    </View>
                    <TextInput 
                        placeholder="请输入密码"
                        style={styles.textinput}
                        secureTextEntry={true}
                        onChangeText={setpassword}></TextInput>
                </View>

                <View style={styles.password2}>
                    <View style={styles.currency}>
                        <FontAwesome5 name="unlock-alt" size={p2d(70)} color="black"  style={{position:'absolute',top:p2d(15)}}/>
                    </View>
                    <TextInput 
                        placeholder="请确认密码"
                        style={styles.textinput}
                        secureTextEntry={true}
                        onChangeText={setTwopwd}></TextInput>
                </View>

            </View>
            <View style={styles.in}>
                <TouchableOpacity style={{width:'100%',height:p2d(100),}} onPress={getData}>
                    <Text style={styles.incontext}>注册</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}
const styles =StyleSheet.create({
    login:{
        width:'80%',
        backgroundColor:'#F0F8FF',
        height:p2d(450),
        opacity:0.7,
        borderRadius:p2d(25),
        top:p2d(300),
        left:'10%'
    },
    header:{
        height:p2d(100),
    },
    font:{
        fontSize:p2d(50),
    },
    in:{
        width:'80%',
        backgroundColor:'white',
        height:p2d(100),
        opacity:0.5,
        borderRadius:p2d(25),
        top:p2d(400),
        left:'10%'
    },
    login1:{
        position:'absolute',
        lineHeight:p2d(125),
        fontSize:p2d(40),
        left:p2d(320),
        color:'white',
        borderBottomWidth:p2d(2)
        
    },
    incontext:{
        position:'absolute',
        fontSize:p2d(40),
        lineHeight:p2d(100),
        color:'black',
        left:p2d(240),
    },
    account:{
        height:p2d(150),
        borderBottomWidth:p2d(3),
        borderBottomColor:'white',
    },
    currency:{
        height:p2d(100),
        borderRightWidth:p2d(3),
        width:p2d(100),
        position:'absolute',
        top:p2d(25),
        left:p2d(30),
    },
    textinput:{
        height:p2d(100),
        top:p2d(25),
        left:p2d(150),
        fontSize:p2d(30),
        width:p2d(640),
    },
    
    password2:{
        borderTopWidth:p2d(3),
        borderTopColor:'white',
        marginTop:p2d(40),

    },
})
export default Register;